<template>
  <el-dialog
    v-model="visible"
    :title="`角色【${form.ro_name}(No.${form.ro_id})】的权限`"
    width="1000px"
    top="2vh"
    :before-close="handleClose"
  >
    <el-card
      :header="module.menuName"
      v-for="module in modules"
      :key="module.menuId"
      shadow="never"
      :body-style="{ padding:'0px 0px 0px 5px',display: 'flex', alignItems: 'center', flexWrap: 'wrap' }"
    >
      <div
        style="
          flex: none;
          border-radius: 5px;
          width: 128px;
          margin: 5px 50px 5px 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
        v-for="sub in module.subMenuList"
        :key="sub.menuId"
      >
        <span
          style="vertical-align: middle; font-weight: bold"
          :style="{ color: sub.has ? '#13ce66' : '#909399' }"
          >{{ sub.menuName }}</span
        >
        <el-switch
          style="vertical-align: middle"
          v-model="sub.has"
          active-color="#13ce66"
        />
      </div>
    </el-card>

    <template #footer>
      <span>
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" @click="exec">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup >
import { reactive, ref} from "vue";
import { tip, get, post, put, del, ddo } from "@/common";

const modules = ref([]);

const getModules = (ro_id) => {
  get(`/security/role/module/${ro_id}`).then((result) => {
    modules.value = result.data;
  });
};

const visible = ref(false);
const open = (item) => {
  form.ro_id = item.ro_id;
  form.ro_name = item.ro_name;
  form.ro_remark = item.ro_remark;
  visible.value = true;

  getModules(form.ro_id);
};
const handleClose = (done) => {
  done();
};

const form = reactive({
  ro_id: "",
  ro_name: "",
  ro_remark: "",
});

const emit = defineEmits(["ok"]);
const exec = () => {

  const moduleIds = [];
  modules.value.forEach(module=>{
    module.subMenuList.forEach(item=>{
      item.has && moduleIds.push(item.menuId);
    });
  });

  put(`/security/role/module/${form.ro_id}`, moduleIds, {
    title: "提示",
    message: "您确定更新角色权限吗？",
  }).then((result) => {
    emit("ok");    
    tip.success("更新成功！");
  });
};

defineExpose({ open });
</script>

<style>
.x {
}
</style>